<template>
   <view class="uv-page">
      <uv-no-network
         @disconnected="disconnected"
         @connected="connected"
         @retry="retry"
      ></uv-no-network>
      <view class="uv-content">
         <view class="uv-content__circle">
            <uv-icon name="checkbox-mark" color="#fff" size="30"></uv-icon>
         </view>
         <text class="uv-content__normal">网络正常</text>
         <text class="uv-content__tips"
            >请您断开设备的WiFi和数据连接(或开启飞行模式)，即可看到效果</text
         >
      </view>
   </view>
</template>

<script lang="ts" setup>
const disconnected = () => {
   console.log('disconnected');
};
const connected = () => {
   console.log('connected');
};
const retry = () => {
   console.log('retry');
};
</script>

<style lang="scss" scoped>
@use '@/common/demo.scss';

.uv-content {
   padding: 150px 60px 0;
   @include flex(column);
   align-items: center;
   justify-content: center;

   &__circle {
      background-color: $uv-success;
      @include flex;
      border-radius: 100px;
      width: 60px;
      height: 60px;
      align-items: center;
      justify-content: center;
   }

   &__normal {
      font-size: 15px;
      color: $uv-success;
      margin-top: 15px;
   }

   &__tips {
      color: $uv-tips-color;
      font-size: 13px;
      margin-top: 15px;
      text-align: center;
   }
}
</style>
